<template>
  <div class="account-page">
	  <!-- 公共组件-每个页面必须引入 -->
	  <public-module></public-module>
	  <div style="padding:32rpx;background: #fff;padding-bottom:0rpx">
		  <u-form labelPosition="left" :model="form" :rules="rules" ref="form" labelWidth="120" errorType="toast" >
		  	<u-form-item label="收款方式"  borderBottom v-if="type=='edit'" @click="show=true">
					<u--input fontSize="14" inputAlign="right" :value="form.collectionType | fifType" disabled disabledColor="none" placeholder="请选择收款方式" border="none" style="pointer-events: none"></u--input>
					<div slot="right" class="form-icon">
						<u-icon slot="right" name="arrow-right"></u-icon>
					</div>
		  	</u-form-item>
			<u-form-item label="收款方式"  borderBottom v-else>
				<div style="text-align: right;" >{{form.collectionType | fifType}}</div>
			</u-form-item>
		  	<u-form-item  label="微信号" v-if="form.collectionType==1" >
		  		<u--input v-model="form.wechatId" border="none" v-if="type=='edit'" inputAlign="right"  placeholder="请输入微信号"></u--input>
				<div style="text-align: right;" v-else>{{form.wechatId}}</div>
		  	</u-form-item>
			<div v-else>
				<u-form-item  label="收款人"  borderBottom  required prop="collectionName">
					<u--input v-model="form.collectionName" border="none" v-if="type=='edit'" inputAlign="right"  placeholder="请输入收款人"></u--input>
					<div style="text-align: right;" v-else>{{form.collectionName}}</div>
				</u-form-item>
				<u-form-item  label="身份证号"  borderBottom required prop="idCard">
					<u--input v-model="form.idCard" border="none" v-if="type=='edit'" inputAlign="right" placeholder="请输入身份证号"></u--input>
					<div style="text-align: right;" v-else>{{form.idCard}}</div>
				</u-form-item>
				<u-form-item  label="开户银行名称"  borderBottom required prop="bankName">
					<u--input v-model="form.bankName" border="none" v-if="type=='edit'" inputAlign="right" placeholder="请输入开户银行名称"></u--input>
					<div style="text-align: right;" v-else>{{form.bankName}}</div>
				</u-form-item>
				<u-form-item  label="银行帐号" required prop="bankId">
					<u--input v-model="form.bankId" border="none" v-if="type=='edit'" inputAlign="right" placeholder="请输入银行帐号"></u--input>
					<div style="text-align: right;" v-else>{{form.bankId}}</div>
				</u-form-item>
			</div>
		  </u-form>
	  </div>
	 
	  <div class="bottom-btn">
	     <u-button text="修改帐户"  shape="circle"  @click="type = 'edit'" v-if="type=='see'" color="linear-gradient(180deg, #FF5E01 0%, #FF5E01 100%)"></u-button>
	  	 <u-button text="确认修改"  shape="circle"  @click="saveForm" :loading="btnLoading" v-else color="linear-gradient(180deg, #FF5E01 0%, #FF5E01 100%)"></u-button>
	  </div>
	  
	  <u-action-sheet :actions="list" :closeOnClickOverlay="true" @select="selectClick" title="选择收款方式" :show="show" @close="show=false"></u-action-sheet>
  </div>
  
</template>

<script>
  import {userDetail, editUser} from '@/config/api.js'
  const defaultForm={
  	     collectionType:1,
  		 wechatId:'',
		 collectionName:'',
  		 idCard:'',
  		 bankName:'',
		 bankId:''
      };
  export default {
    data() {
      return {
        type:'see',
		btnLoading:false,
		rules:{
		   idCard: [{
				required: true,
				message: '请输入身份证号',
				// 可以单个或者同时写两个触发验证方式
				trigger: ['blur', 'change']
			}],
			bankName: [{
				required: true,
				message: '请输入开户银行名称',
				// 可以单个或者同时写两个触发验证方式
				trigger: ['blur', 'change']
			}],
			bankId: [{
				required: true,
				message: '请输入银行帐号',
				// 可以单个或者同时写两个触发验证方式
				trigger: ['blur', 'change']
			}],
			collectionName: [{
				required: true,
				message: '请输入收款人',
				// 可以单个或者同时写两个触发验证方式
				trigger: ['blur', 'change']
			}]
		},
		form:JSON.parse(JSON.stringify(defaultForm)),
		list: [
			{id:1,name:'微信'},
			{id: 2,name:'银行汇款'}
		],
		show:false
		
      }
    },
    onLoad() {
      this.getuserDetail()
    },
	filters:{
		fifType(val){
			if(val==1){
				return '微信'
			}else if(val==2){
				return '银行汇款'
			}
		},
	},
    methods: {
		selectClick(e){
			this.show = false;
			this.form.collectionType = e.id
		},
      getuserDetail() {
        userDetail().then(res => {
           this.form.collectionType = res.collectionType
           this.form.wechatId = res.wechatId
		   this.form.idCard = res.idCard
           this.form.bankName = res.bankName
           this.form.bankId = res.bankId
		   this.form.collectionName = res.collectionName
        })
      },
      saveForm(){
		   this.$refs.form.validate().then(res => {
			   this.btnLoading = true;
			   let  data = JSON.parse(JSON.stringify(this.form));
				 editUser(data).then(()=>{
					   this.btnLoading = false;
					   uni.showToast({
						 title: '提交成功！',
						 icon: 'none',
						 duration: 2000,
					   });
					   this.type = 'see'
					   this.getuserDetail();
				 }).catch(()=>{
					   this.btnLoading = false;
				 })
		   }).catch(errors => {
			
		   })
      },
    }
  }
</script>

<style lang="scss">
  @import '@/style/common.scss';
  .account-page{
	  .bottom-btn{
		  padding:24rpx;
		  margin-top:60rpx;
		  
	  }
  }
  
</style>